<template>
	<div id="VoteDetail">
		<div class="vote-top" :style="note"></div>
		<div class="vote-bottom">
			<ul class="bar-list">
				<li>
					<p v-if="itemInfo.ticket_count == null " class="number">0</p>
					<p v-else class="number">{{itemInfo.ticket_count * multiple}}</p>
					<p class="text">当前票数</p>
				</li>
				<li v-if="itemInfo.item_rank > 0">
					<p class="number">{{itemInfo.item_rank}}</p>
					<p class="text">目前排行</p>
				</li>
				<li v-else>
					<p class="number">0</p>
					<p class="text">未上排行榜</p>
				</li>
				<li v-if="vote_item_prev == null">
					<p class="number">No.1</p>
					<p class="text">当前排名</p>
				</li>
				<li v-else>
					<p class="number">{{(vote_item_prev.ticket_count - itemInfo.ticket_count) *multiple }}票</p>
					<p class="text">距上一名差</p>
				</li>
			</ul>
			<div class="info-content">
				<div class="info-title">
					<h1><b>名称：</b>{{itemInfo.item_title}}</h1>
					<p class="info-code"><b>编号：</b>{{itemInfo.item_id}}</p>
					<p class="intro-text" v-html="'<b>藏品介绍：</b>' + itemInfo.item_intro"></p>
				</div>
				<div class="imgs-list">
					<img v-for="(item,index) in itemInfo.item_imgs" :src="item + '?imageView2/1/w/375/h/204/q/75|imageslim'" />
				</div>

			</div>
			<div class="vote-copy">
				<p>本次活动最终解释权归郑州宋唐电子商务有限公司所有</p>
			</div>
		</div>
		<div class="bottom-bar">
			<ul>
				<li>
					<router-link to="/VoteActivity">首页</router-link>
				</li>
				<li>
					<router-link :to="'/EnrollOffice/vote_id/' + itemInfo.vote_id">我要报名</router-link>
				</li>
				<li @click="shareImg = ! shareImg">为TA加油</li>
				<li class="like" @click="voteTicket(itemInfo.vote_id,itemInfo.item_id)">投票</li>
			</ul>
		</div>
		<!--<bottom></bottom>-->
		<x-dialog v-model="shareImg" hide-on-blur class="share-wrap">
			<div @click="shareImg = false" style="width: 100%;height: 100%;">
				<img src="../assets/images/home/active_share.png" alt="" />
			</div>
		</x-dialog>
		<alert v-model="show2" :title="title1" :content="title2" hide-on-blur></alert>

		<toast v-model="success" type="text" width="5rem">{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery';
	import wx from 'weixin-js-sdk';
	import axios from 'axios';
	import { Previewer, Toast, XDialog, Alert } from 'vux';
	import bottom from './ActiveFooter'
	export default {
		data() {
			return {
				multiple: '10',
				itemInfo: '',
				title1: '恭喜，您已报名成功',
				title2: '点击右上角转发邀请好友帮您投票，即有机会赢取iPhoneX',
				note: {
					backgroundImage: "url(" + require("../assets/images/home/active_detail_banner.png") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100% 100%",
				},
				vote_item_prev: '',
				images: [],
				success: false,
				shareImg: false,
				show2: false,
				msg: '',
				shareUrl: '',
				vote_id: '1',
				fullName: '',
			}
		},
		components: {
			Previewer,
			Toast,
			bottom,
			XDialog,
			Alert
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				vm.fullName = from.name;
			})
		},
		mounted() {
			this.getVoteItemDetail();
		},
		//方法
		methods: {
			getVoteItemDetail: function() {
				let item_id = this.$route.params.item_id;
				this.$http({
					method: 'GET',
					url: '/los/api/vote/item_info.json?item_id=' + item_id
				}).then((result) => {
					this.itemInfo = result.data.item_info;
					this.vote_item_prev = result.data.vote_item_prev;
					if(this.fullName == 'EnrollOffice') {
						this.show2 = true;
					}
					this.$nextTick(() => {
						this.getWXShare();
					})
				}).catch((err) => {

				})
			},
			voteTicket: function(vote_id, item_id) {
				console.log(item_id, vote_id);
				var params = {
					item_id: item_id,
					vote_id: vote_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/vote/ticket.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.show2 = !this.show2;
						this.title1 = '谢谢 您已投票成功';
						this.title2 = '返回活动首页右下角可参与抽奖哦！'
						this.$nextTick(() => {
							this.getVoteItemDetail();
						})
					} else {
						this.show2 = !this.show2;
						this.title1 = '今日已投票';
						this.title2 = '转发链接可获取额外的投票机会哦！'
					}
				}).catch((err) => {

				})
			},
			getWXShare: function() {
				let _this = this;
				let urls = window.location.href;
				var ua = navigator.userAgent.toLowerCase();
				if(/iphone|ipad|ipod/.test(ua)) {
					if(urls.indexOf("?") != -1) {
						this.shareUrl = window.location.href;
					} else {
						this.shareUrl = 'http://pm.haowenwan.com/dist/#/';
					}
				} else if(/android/.test(ua)) {
					this.shareUrl = urls;
				}
				var params = {
					url: this.shareUrl,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							debug: result.data.debug,
							appId: result.data.appId,
							timestamp: result.data.timestamp,
							nonceStr: result.data.nonceStr,
							signature: result.data.signature,
							jsApiList: result.data.jsApiList,
						});
						wx.ready(function() {
							wx.onMenuShareAppMessage({
								title: '2018河南首届“公益鉴宝”藏品入围评选活动', // 分享标题
								desc: '我正在参加“公益鉴宝”评选，帮忙投下票吧！', // 分享描述
								link: urls, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'http://pm.haowenwan.com/public/static/images/item_logo.jpg', // 分享图标
								type: 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function(res) {
									_this.shareCallback('ShareAppMessage', urls, _this.vote_id);
								},
								cancel: function(err) {
									// 用户取消分享后执行的回调函数
								}
							});
							//分享朋友圈
							wx.onMenuShareTimeline({
								title: '我正在参加“公益鉴宝”评选，帮忙投票赢取iPhoneX！', // 分享标题
								link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'http://pm.haowenwan.com/public/static/images/item_logo.jpg', // 分享图标
								success: function() {
									_this.shareCallback('ShareTimeline', urls, _this.vote_id);
								},
							});
							wx.error(function(res) {

							});
						})
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			shareCallback: function(share_method, share_url, vote_id) {
				var params = {
					share_url: share_url,
					share_method: share_method,
					vote_id: vote_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/vote/share.json',
					data: params
				}).then((result) => {

				}).catch((err) => {

				});
			},
		},
	}
</script>

<style scoped>
	#VoteDetail {
		padding-bottom: 1.33333rem;
	}
	
	.vote-top {
		width: 100%;
		height: 5.44rem;
		/*background: url(../assets/images/home/vote_detail_bg.jpg) center center no-repeat;*/
		background-size: 100% 100%;
	}
	
	.vote-bottom {
		width: 100%;
		margin-top: -0.53333rem;
		padding: 0.26666rem;
	}
	
	.vote-bottom .bar-list {
		background-color: #fff;
		border-radius: 0.13333rem;
		display: flex;
	}
	
	.vote-bottom .bar-list li {
		position: relative;
		width: 100%;
		padding: 0.46666rem 0;
		text-align: center;
	}
	
	.vote-bottom .bar-list li p {
		line-height: 1;
	}
	
	.vote-bottom .bar-list li .number {
		padding-bottom: 0.26666rem;
		font-size: 0.48rem;
		color: #d35f5d;
	}
	
	.vote-bottom .bar-list li .text {
		font-size: 0.32rem;
		color: #c1c1c1;
	}
	
	.vote-bottom .bar-list li:after {
		content: '';
		position: absolute;
		margin-top: -0.24rem;
		top: 50%;
		right: 0;
		width: 1px;
		height: 0.48rem;
		background-color: #e6e6e6;
	}
	
	.vote-bottom .bar-list li:last-child:after {
		display: none;
	}
	/*详情*/
	
	.info-content {
		margin-top: 0.26666rem;
		padding: 0.26666rem 0;
		border-radius: 0.13333rem;
		background-color: #fff;
	}
	
	.info-content .info-title {
		padding: 0.13333rem 0.26rem;
		text-align: left;
		font-size: 0.48rem;
	}
	
	.info-content .info-title h1 {
		padding: 0.13333rem 0;
		font-size: 0.48rem;
	}
	
	.info-content .info-title .info-code {
		padding-bottom: 0.13rem;
		/*color: #e68f6b;*/
	}
	
	.info-content .imgs-list img {
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 0.13333rem;
		margin-bottom: 0.13333rem;
	}
	/*通用标题*/
	
	.vote-detail-title {
		position: relative;
		margin: 0.26666rem 0;
		height: 0.8rem;
		text-align: center;
		font-size: 0.42666rem;
	}
	
	.vote-detail-title .title-bg {
		position: absolute;
		left: 50%;
		bottom: 0;
		margin-left: -1.83333rem;
		width: 3.66666rem;
		height: 0.54666rem;
		background: url(../assets/images/home/vote_detail_title_bg.png) center bottom no-repeat;
		background-size: 100% 100%;
	}
	/*底部操作栏*/
	
	.bottom-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
	
	.bottom-bar ul {
		background-color: #fff;
		text-align: center;
		display: flex;
	}
	
	.bottom-bar ul li {
		position: relative;
		width: 100%;
		height: 1.33333rem;
		line-height: 1.33333rem;
		font-size: 0.34666rem;
	}
	
	.bottom-bar ul li:after {
		content: '';
		position: absolute;
		margin-top: -0.18665rem;
		top: 50%;
		right: 0;
		width: 1px;
		height: 0.37333rem;
		background-color: #e6e6e6;
	}
	
	.bottom-bar ul li:last-child:after,
	.bottom-bar ul li:nth-child(3):after {
		display: none;
	}
	
	.bottom-bar ul li.like {
		background: #c76d6b url(../assets/images/home/vote_detail_bar.png) 0.26666rem center no-repeat;
		background-size: 0.88rem 0.69333rem;
		color: #fff;
		text-indent: 3em;
	}
	
	.vote-copy {
		padding: 0.53333rem 0;
		text-align: center;
		font-size: 0.29333rem;
		color: #c6c6c6;
	}
</style>